<template>
    <section id="section">
          <template>
            <quill-editor
              v-model="content"
              ref="myQuillEditor"
              :options="editorOption"
              :disabled='true'
            >
            </quill-editor>
          </template>
      <p class="next" @click="save" ref="buttonsave">收藏该文章</p>
      <p class="next" @click="deleteArticle" ref="buttondel">取消收藏</p>
    </section>
</template>

<script>
  import { Toast } from 'mint-ui';
  import {collectArticle,CancelCollectArticle} from "../../api/api"
    export default {
        props: [],
        name: 'app',
        data(){
            return {
              content:"",
              editorOption:{
                modules: {
                  toolbar: false
                },
                theme: 'snow'
              },
            }
        },
        computed: {},
        components: {},
        created(){
        },
        methods: {
          save(){
              let params={
                UserId:JSON.parse(localStorage.getItem("user")).Id,
                ArticleId:this.$route.params.content.Id,
              };
            collectArticle(params).then(res=>{
                if(res.data.IsSuccess){
                  Toast({
                    message: '收藏成功',
                    position: 'middle',
                    duration: 1000
                  });
                }
                else{
                  Toast({
                    message: "已收藏过该文章",
                    position: 'middle',
                    duration: 1000
                  });
                }

            });
          },
          deleteArticle(){
            let params={
              UserId:JSON.parse(localStorage.getItem("user")).Id,
              ArticleId:this.$route.params.content.Id,
            };
            CancelCollectArticle(params).then(res=>{
                console.log(res);
              Toast({
                message: '取消成功',
                position: 'middle',
                duration: 500
              });
              setTimeout(()=>{
                this.$router.push("/mine");
              },500);

            });
          }
        },
        mounted() {
            if(this.$route.params.content){
              this.content=this.$route.params.content.Content;
              if(this.$route.params.shoucang){
                  this.$refs.buttonsave.style.display="none";
              }
              else{
                this.$refs.buttondel.style.display="none";
              }
            }
            else{
              this.$router.back(-1);
            }
        },
        destroyed(){
        }
    }
</script>

<style lang="scss" scoped>
  .next{
    width: 90%;
    height: 40px;
    position: fixed;
    bottom:40px;
    left:5%;
    border-radius: 5px;
    color: white;
    text-align: center;
    line-height: 45px;
    letter-spacing: 3px;
    background-color: rgba(0, 146, 252, 0.5);
  }
</style>
